<template>
	<view class="detail">
		<view class="goodsPhoto">
			<image src="../../static/fendi05.jpg" mode=""></image>
			<view class="back" @click="goBack()">
				<image src="../../static/wback.png" mode=""></image>
			</view>
			<view class="share">
				<image src="../../static/share.png" mode=""></image>
			</view>
		</view>
		<view class="momeyBox">
			<view class="left">
				<text>¥</text>
				<text>78.9</text>
			</view>
			<view class="right">
				<text>已售</text>
				<text>500</text>
			</view>
		</view>
		<view class="introduce">
			<text>&nbsp;&nbsp;UNNY粉底液持久不易脱妆暗沉持妆油皮官方旗舰店</text>
		</view>
		<view class="benefit">
			<view class="benefit01 benefit02">
				<text>过敏包退</text>
			</view>
			<view class="benefit01">
				<text>超6千回头客</text>
			</view>
			<view class="benefit01">
				<text>超3万人加购</text>
			</view>
		</view>
		<view class="pay">
			<text>支持支付宝支付、微信支付</text>
		</view>
		<view class="info">
			<ul>
				<li>
					<view class="left">
						<image src="../../static/kuaidi.png" mode=""></image>
					</view>
					<view class="middle">
						<text>承诺48小时内发货，晚发必赔，预计明天送达</text>
					</view>
					<view class="right">
						<image src="../../static/Icon_Arrow (1).png" mode=""></image>
					</view>
				</li>
				<li>
					<view class="left">
						<image src="../../static/aixin.png" mode=""></image>
					</view>
					<view class="middle">
						<text>大促价保 退货宝 过敏包退 假一赔四 极速退款</text>
					</view>
					<view class="right">
						<image src="../../static/Icon_Arrow (1).png" mode=""></image>
					</view>
				</li>
				<li>
					<view class="left">
						<image src="../../static/beian.png" mode=""></image>
					</view>
					<view class="middle">
						<text>化妆品备案编号/注册账号</text>
					</view>
					<view class="right">
						<image src="../../static/Icon_Arrow (1).png" mode=""></image>
					</view>
				</li>
			</ul>
		</view>
		<view class="footer">
			<view class="like">
				<image src="../../static/like.png" mode=""></image>
			</view>
			<view class="btn">
				<view class="addCart">
					<text>加入购物车</text>
				</view>
				<view class="line">
					
				</view>
				<view class="buy">
					<text>立即购买</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {  
		    goBack() {  
		      uni.navigateBack({  
		        delta: 1  
		      });  
		    }  
		  }  
	}
</script>

<style lang="less" scoped>
	.detail {
		width: 100%;

		.goodsPhoto {
			width: 100%;
			height: 340px;
			position: relative;
			// border-bottom: 1px solid #f57a73;

			image {
				width: 100%;
				height: 100%;
			}
			
			.back {
				width: 30px;
				height: 30px;
				position: absolute;
				border-radius: 6px;
				top: 20px;
				left: 10px;
				background-color: #847f85;
				
				image {
					width: 24px;
					height: 24px;
					margin: 2px;
				}
			}
			
			.share {
				width: 30px;
				height: 30px;
				position: absolute;
				border-radius: 6px;
				top: 20px;
				right: 10px;
				background-color: #847f85;
				
				image {
					width: 20px;
					height: 20px;
					margin: 5px;
				}
			}
			
			
		}

		.momeyBox {
			width: 94%;
			margin: 0 auto;
			height: 50px;
			padding: 0 11px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// background: linear-gradient(90deg, #ecb7bb, #fbd6e5);

			.left {
				font-size: 24px;
				color: #f57a73;
				font-weight: 600;
			}
		}

		.introduce {
			width: 94%;
			padding: 0 11px;
			font-weight: 600;
			font-family: 华文黑体;
		}

		.benefit {
			width: 94%;
			padding: 0 11px;
			font-size: 14px;
			color: #617180;
			font-weight: 600;
			display: flex;
			margin-top: 10px;

			.benefit01 {
				// border: 1px solid #ccc;
				background-color: #f1f5f8;
				border-radius: 4px;
				padding: 3px 4px;
				margin-right: 6px;
			}

			.benefit02 {
				color: #25a583;
				background-color: #e0faf4;
			}
		}

		.pay {
			width: 90%;
			padding: 5px 10px;
			margin: 0 auto;
			height: 24px;
			border-radius: 4px;
			background-color: #f0fef0;
			font-size: 14px;
			color: #4ab943;
			font-weight: 600;
			margin-top: 10px;
		}

		.info {
			width: 96%;
			margin: 0 auto;
			margin-top: 14px;

			ul {
				list-style: none;
				margin: 0;
				padding: 0;

				li {
					width: 100%;
					height: 32px;
					display: flex;
					justify-content: space-between;
					// background-color: palegoldenrod;

					.left {
						width: 30px;
						height: 100%;
						// background-color: palegreen;

						image {
							width: 22px;
							height: 22px;
						}
					}

					.middle {
						width: 310px;
						height: 100%;
						font-size: 14px;
						color: #5d5e68;
						// background-color: paleturquoise;
					}

					.right {
						width: 20px;
						height: 100%;
						// background-color: palegreen;

						image {
							width: 17px;
							height: 17px;
						}
					}
				}
			}
		}
		
		.footer {
			width: 100%;
			height: 50px;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 100;
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.like {
				width: 38px;
				height: 38px;
				border: 1px solid #dedede;
				margin-left: 10px;
				
				image {
					margin-top: 7px;
					margin-left: 7px;
					width: 24px;
					height: 24px;
				}
			}
			
			.btn {
				width: 210px;
				height: 40px;
				display: flex;
				background-color: #ecb7bb;
				margin-right: 10px;
				border-radius: 10px;
				color: white;
				font-size: 15px;
				
				.addCart {
					width: 100px;
					height: 100%;
					line-height: 40px;
					text-align: center;
				}
				
				.line {
					width: 2px;
					margin-top: 5px;
					height: 30px;
					background-color: #fff;
				}
				
				.buy {
					width: 100px;
					height: 100%;		
					line-height: 40px;
					text-align: center;
				}
			}
		}
	}
</style>